// 发布评论组件
import React, { useRef, useState, useEffect, useCallback } from "react";
import { Input, Button } from "antd";

import "./index.less";

const { TextArea } = Input;

export default function ReleaseComment() {
  const setState = useState(0)[1];
  const page: any = useRef({
    focus: false,
    hasContent: false,
  });
  // 重新渲染组件
  const render = useCallback(() => setState(Math.random()), [setState]);
  // 输入框聚焦
  const textFocus = () => {
    page.current.focus = true;
    render();
  };
  // 输入框失改变触发
  const textChange = (e: any) => {
    // console.log(e.target.value);
    if (e.target.value) {
      page.current.hasContent = true;
    } else {
      page.current.hasContent = false;
    }
    render();
  };
  // 添加点击空白监听事件
  const listener = useCallback(() => {
    // console.log(12313212);
    document.addEventListener("mouseup", (e: any) => {
      var _con = document.querySelector(".releaseComment");
      if (_con) {
        if (!_con.contains(e.target)) {
          page.current.focus = false;
          render();
        }
      }
    });
  }, [render]);

  useEffect(() => {
    listener();
  }, [listener]);

  return (
    <div
      className={`releaseComment ${
        page.current.focus ? "releaseComment-active" : ""
      } `}
    >
      <div className="input-box">
        <TextArea
          className="input"
          placeholder="写下你的评论..."
          autoSize
          onFocus={textFocus}
          onChange={textChange}
        />
        <div className="expression iconfont iconbiaoqing"></div>
      </div>
      <Button
        type="primary"
        className={`release ${page.current.hasContent ? "" : "disabled"} ${
          page.current.focus ? "" : "hide"
        }`}
      >
        发布
      </Button>
    </div>
  );
}
